<template >
    <div>
        <div class="listConBasic" v-if="userInf">
            <div class="listItm" style="height: 100px;">
                <div class="listFlex main">
                    <div class="listLeft" style="line-height:100px;">头像</div>
                    <div class="listRight">
                        <span
                            class="listCheckT"
                            style="width:66px;height:66px;background:pink;margin-top:19px;display: block;border-radius:50%;overflow:hidden;float:right;"
                        >
                            <image
                                style="width:100%;height:100%;text-align:right;"
                                v-if="userInf.imageUrl"
                                :src="userInf.imageUrl"
                            />
                        </span>
                        <span class="weui-cell__ft_in-access hiddenCom"></span>
                    </div>
                </div>
            </div>
            <div class="listItm">
                <div class="listFlex main">
                    <div class="listLeft">昵称</div>
                    <div class="listRight">
                        <span class="listCheckT">
                            <input
                                type="text"
                                placeholder-style="color: #999;"
                                class="inputStyle"
                                placeholder="请填写"
                                v-model="userInf.nickname"
                            />
                        </span>
                    </div>
                </div>
            </div>
            <div class="listItm">
                <div class="listFlex main">
                    <div class="listLeft">姓名</div>
                    <div class="listRight">
                        <span class="listCheckT">
                            <input
                                type="text"
                                placeholder-style="color: #999;"
                                class="inputStyle"
                                placeholder="请填写"
                                v-model="userInf.chineseName"
                            />
                        </span>
                    </div>
                </div>
            </div>
            <picker class="listItm" @change="sexChange" :value="index1" :range="sexRange">
                <div class="listFlex main">
                    <div class="listLeft">性别</div>
                    <div class="listRight" v-if="index1">
                        <span class="listCheckT">{{sexRange[index1]}}</span>
                        <span class="weui-cell__ft_in-access"></span>
                    </div>
                    <div class="listRight" v-else>
                        <span class="listCheckT">请选择</span>
                        <span class="weui-cell__ft_in-access"></span>
                    </div>
                </div>
            </picker>
            <picker class="listItm" mode="date" @change="bindDateChange" :end="endTime">
                <div class="listFlex main">
                    <div class="listLeft">出生日期</div>
                    <div class="listRight" v-if="userInf.birthday">
                        <span class="listCheckT">{{ userInf.birthday }}</span>
                        <span class="weui-cell__ft_in-access"></span>
                    </div>
                    <div class="listRight" v-else>
                        <span class="listCheckT">请选择</span>
                        <span class="weui-cell__ft_in-access"></span>
                    </div>
                </div>
            </picker>
            <div class="listItm">
                <div class="listFlex main">
                    <div class="listLeft">联系电话</div>
                    <div class="listRight">
                        <span class="listCheckT">{{userInf.mobile}}</span>
                    </div>
                </div>
            </div>

            <div class="btn">
                <div class="saveBtn" @click="saveInf()">
                    <span>保存</span>
                </div>
                <div class="saveBtn" @click="handleClick">
                    <span>退出登录</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "MyMessage",
    data() {
        return {
            index1: 0,
            sexRange: ["男", "女"],
            userInf: {
                imageUrl: null,
                nickname: null,
                chineseName: null,
                sex: null,
                birthday: null,
                mobile: null
            }
        };
    },
    onShow() {
        this.getInf();
    },
    mounted() {
        this.getInf();
    },
    methods: {
        sexChange(e) {
            this.index1 = e.target.value;
            this.userInf.sex = e.target.value - 0 + 1 + "";
        },
        handleClick() {
            uni.showModal({
                title: "退出登录",
                content: "确认退出！",
                success(res) {
                    if (res.confirm) {
                        uni.showLoading({
                            title: "退出中.." //数据请求前loading，提高用户体验
                        });
                        setTimeout(() => {
                            uni.removeStorage({
                                key: "token",
                                success(res) {
                                    uni.hideLoading();
                                    const url = "../login/index";
                                    uni.reLaunch({
                                        url: url
                                    });
                                }
                            });
                        }, 1000);
                    } else if (res.cancel) {
                        // console.log('用户点击取消')
                    }
                }
            });
        },
        bindDateChange(e) {
            // 出生日期
            this.userInf.birthday = e.mp.detail.value;
        },
        getInf() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/users/getUserInfo")
                .then(res => {
                    if (res.status == 200) {
                        _this.userInf = Object.assign({}, res.content);
                        _this.userInf.birthday = _this.userInf.birthday.split(
                            " "
                        )[0];
                        if (_this.userInf.sex) {
                            _this.index1 = _this.userInf.sex - 1 + "";
                        }
                        var data = {
                            imageUrl: _this.userInf.imageUrl,
                            nickname: _this.userInf.nickname,
                            token: uni.getStorageSync("token").token,
                            chineseName: _this.userInf.chineseName,
                            mobile: _this.userInf.mobile,
                            account: uni.getStorageSync("token").account,
                            id: _this.userInf.id,
                            openId: uni.getStorageSync("token").openId
                        };
                        uni.setStorage({
                            //存储到本地
                            key: "token",
                            data: data
                        });
                    } else {
                        uni.showToast({
                            title: "网路不畅~",
                            icon: "none"
                        });
                    }
                })
                .catch(err => reject(err));
        },
        saveInf() {
            var _this = this;
            _this.$ajaxs
                .post("/mobile/v1/pregnant/savingBaseInfo", _this.userInf)
                .then(res => {
                    if (res.status == 200) {
                        wx.showToast({
                            title: "保存成功",
                            icon: "none"
                        });
                        setTimeout(() => {
                            _this.getInf();
                        }, 1000);
                    } else {
                        wx.showToast({
                            title: "保存失败",
                            icon: "none"
                        });
                    }
                })
                .catch(() => {});
        },
        lodingtop() {
            this.getInf();
            uni.stopPullDownRefresh();
        }
    }
};
</script>
<style scoped>
.listItm {
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
}
.listFlex {
    display: flex;
    height: 100%;
    justify-content: space-between;
}
.listCheckT {
    color: #999;
    margin-right: 8px;
}
.listRight {
    width: 60%;
    text-align: right;
}
.listLeft {
    width: 40%;
}
.inputStyle {
    display: inline-block;
    margin-top: 12px;
    text-align: right;
    color: #999;
}
.hiddenCom {
    visibility: hidden;
}
.btmCon {
    height: 90px;
    margin-top: 10px !important;
    background: #fff;
    color: #fa4d93;
}
.btn {
    position: fixed;
    bottom: 0px;
    left: 0px;
    margin-top: 40px;
    width: 100%;
    height: 64px;
    padding: 0 70upx;
    background: #fff;
    display: flex;
    justify-content: space-between;
}
.saveBtn {
    height: 80upx;
    width: 240upx;
    text-align: center;
    line-height: 80upx;
    border: 1px solid #fa4d93;
    border-radius: 40upx;
    color: #fa4d93;
    font-size: 32upx;
    background: #fff;
    margin: 0 40upx;
}
.weui-cell__ft_in-access {
    padding-right: 13px;
    position: relative;
}
.weui-cell__ft_in-access:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #999;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 2px;
}
.main {
    width: 86%;
    margin: 0 auto;
}
</style>


